<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="合同名称" prop="contractName">
        <el-input
          v-model="queryParams.contractName"
          placeholder="请输入合同名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合同编号" prop="contractNo">
        <el-input
          v-model="queryParams.contractNo"
          placeholder="请输入合同编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >立案</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="caseList" border stripe>
      <el-table-column label="合同名称" align="center" prop="contractName" />
      <el-table-column label="合同编号" align="center" prop="contractNo" />
      <el-table-column label="案件状态" align="center" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status === '5'">审核材料</span>
          <span v-else-if="scope.row.status === '6'">确认缴费</span>
          <span v-else-if="scope.row.status === '7'">受理中</span>
          <span v-else-if="scope.row.status === '8'">组庭中</span>
          <span v-else-if="scope.row.status === '9'">审理中</span>
          <span v-else-if="scope.row.status === '10'">裁决中</span>
          <span v-else-if="scope.row.status === '11'">送达中</span>
          <span v-else-if="scope.row.status === '12'">已完成</span>
          <span v-else-if="scope.row.status === '13'">撤案</span>
          <span v-else-if="scope.row.status === '14'">取消立案</span>
        </template>
      </el-table-column>
      <el-table-column label="争议金额" align="center" prop="amount" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-detail"
            @click="handleDetail(scope.row.caseId)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-divider content-position="left">案件信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属项目" prop="projectId">
              <el-select v-model="form.projectId" placeholder="请选择所属项目" @change="initProjectTypeRemark">
                <el-option
                  v-for="item in projects"
                  :key="item.projectId"
                  :label="item.name"
                  :value="item.projectId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="案件标的额" prop="amount">
              <el-input v-model="form.amount" type="number" placeholder="请输入案件标的额">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="案件双方" prop="isDispute">
              <el-radio-group v-model="form.isDispute">
                <el-radio :label="1">发生了争议或逾期</el-radio>
                <el-radio :label="2">未发生争议或逾期</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="仲裁请求" prop="arbitrationRequest">
              <el-input v-model="form.arbitrationRequest" type="textarea" :rows="8" placeholder="1.请求被申请人归还所欠借款****元人民币；
2.请求被申请人归还所欠借款利息****元（暂计算至****年*月**日）；
3.请求本案所发生的一切仲裁费、律师费均由被申请人承担。"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="索赔额的计算及各项计算数值的说明和依据" prop="arbitrationBasis">
              <el-input v-model="form.arbitrationBasis" type="textarea" :rows="8" placeholder="利息以100000元人民币为基数，从打款日2018年1月12日起算，暂计算至2018年7月12日（共6个月）：

        100000×2%×6=12000（元）"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仲裁请求所依据的事实和理由" prop="arbitrationReason">
              <el-input v-model="form.arbitrationReason" type="textarea" :rows="10" placeholder="    2017年底，被申请人因资金困难，与申请人签订了《借款合同》，约定被申请人向申请人借款100000元，并约定借款利息为月2%，借款期限为3个月，被申请人应于2018年3月12日还款。合同签订后，申请人于2018年1月12日，通过银行转款的方式，向被申请人转款100000元，但被申请人并未按照合同约定向申请人归还借款。直至2018年7月12日提起仲裁，被申请人仍未向申请人支付任何本金。为维护申请人权利，特向中国国际经济贸易仲裁委员会湖北分会提起仲裁。"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">被申请人信息</el-divider>
        <el-row>
          <el-col :span="24" style="text-align: center">
            <el-button icon="el-icon-circle-plus-outline" type="primary" @click="openRespondentDialog">添加被申请人</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" v-for="(item, index) in respondents" :key="index">
            <el-card>
              <el-row>
                <el-col :span="4">
                  <el-avatar :size="50" class="el-icon-user" v-if="item.type === '1'"></el-avatar>
                  <el-avatar :size="50" class="el-icon-office-building" v-else-if="item.type === '2'"></el-avatar>
                </el-col>
                <el-col :span="14" style="font-size: 19px">
                  <el-row>
                    被申请人：{{item.name}}
                  </el-row>
                  <el-row>
                    手机号：{{item.mobile}}
                  </el-row>
                </el-col>
                <el-col :span="6">
                  <el-row>
                    <el-button type="primary" size="mini" plain @click="editRespondent(index)"> <i class="el-icon-edit"></i>编辑</el-button>
                  </el-row>
                  <el-row>
                    <el-button type="danger" size="mini" plain @click="removeRespondent(index)"><i class="el-icon-delete"></i>删除</el-button>
                  </el-row>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-divider content-position="left">合同与证据</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同" prop="contractId">
              <el-select v-model="form.contractId"
                         placeholder="请输入合同名称"
                         filterable
                         remote
                         clearable
                         reserve-keyword
                         :loading="contractLoading"
                         :remote-method="remoteMethod"
                         style="width: 300px">
                <el-option
                  v-for="item in contracts"
                  :key="item.id"
                  :label="item.contractName"
                  :value="item.id">
                  {{item.contractNo}}-{{item.contractName}}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-tooltip placement="bottom" effect="light" v-if="evidenceTips !== '' && evidenceTips !== null">
              <div slot="content" v-html="evidenceTips"></div>
              <el-button type="primary" style="float: right" @click="openEvidenceDialog">添加证据</el-button>
            </el-tooltip>
            <el-button type="primary" style="float: right" disabled v-else>添加证据</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" >
            <el-table :data="evidences">
              <el-table-column label="文件名称" align="center" prop="evidenceName" />
              <el-table-column label="证明目的" align="center" prop="evidenceRemark" />
              <el-table-column label="查看" align="center">
                <template slot-scope="scope">
                  <el-button type="danger" @click="removeEvidence(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确认发起仲裁</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="项目详情" :visible.sync="detailDialogVisible" :close-on-click-modal="false" width="80%" append-to-body>
      <el-tabs v-model="activeName" tab-position="right" v-loading="caseInfoLoading">
        <el-tab-pane label="案件" name="first">
          <el-divider content-position="left">案件信息</el-divider>
          <el-form v-if="caseInfo" label-width="120px" size="large">
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属项目">
                  {{caseInfo.project_title}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="仲裁费用">
                  {{caseInfo.case_arbitration_fee}}元
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="案件编号">
                  {{caseInfo.case_no}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="案件标的额">
                  {{caseInfo.case_amount}}元
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="核定电子送达">
                  <span v-if="caseInfo.email_send === '1'">已</span><span v-else>未</span>约定邮件、短信等电子方式送达
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="案件创建时间">
                  {{caseInfo.create_time}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="发起仲裁时间">
                  {{caseInfo.init_arbitration_time}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经办秘书">
                  {{caseInfo.secretary_name}}；联系电话：{{caseInfo.secretary_mobile}}；传真号：{{caseInfo.secretary_fax}}；邮箱：{{caseInfo.secretary_email}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-divider content-position="left">案件进度</el-divider>
          <el-steps :active="caseInfo.status_id - 4" finish-status="success" style="margin-top: 20px;margin-bottom: 20px" v-if="caseInfo">
            <el-step title="确认发起仲裁" ></el-step>
            <el-step title="审核材料" ></el-step>
            <el-step title="确认缴费" ></el-step>
            <el-step title="受理中" ></el-step>
            <el-step title="组庭中" ></el-step>
            <el-step title="审理中" ></el-step>
            <el-step title="裁决中" ></el-step>
            <el-step title="送达中" ></el-step>
            <el-step title="已完成" ></el-step>
          </el-steps>
          <el-row v-if="caseInfo" style="text-align: center">
            <el-button v-if="caseInfo.status_id === 5 || caseInfo.status_id === 7" type="primary" @click="openCaseFileConfirm">补件</el-button>
            <el-popconfirm
              :title="payTitle" v-if="caseInfo.status_id === 6" @onConfirm="confirmPay">
              <el-button type="primary" slot="reference">确认缴费</el-button>
            </el-popconfirm>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="文书" name="second">
          <el-table :data="caseDocument.list" border stripe v-loading="caseDocumentLoading">
            <el-table-column label="行号" type="index"/>
            <el-table-column label="函号" align="center" prop="document_no" />
            <el-table-column label="文件名称" align="center" prop="document_name"/>
            <el-table-column label="送达对象" align="center" prop="send_user"/>
            <el-table-column label="送达类型" align="center" prop="send_type"/>
            <el-table-column label="送达地址" align="center" prop="send_address"/>
            <el-table-column label="创建时间" align="center" prop="send_time" />
            <el-table-column label="送达状态" align="center" prop="send_result" />
            <el-table-column label="签章状态" align="center" prop="signature_status" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="showCaseDocument(scope.row.fileurl_full)" type="primary">预览</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="caseDocument.page.total_number > 0"
            :total="caseDocument.page.total_number"
            :page.sync="caseDocument.page.page_current"
            :limit.sync="queryParams.pageSize"
            @pagination="getCaseDocument"
          />
        </el-tab-pane>
        <el-tab-pane label="文件" name="third">
          <el-row>
            <el-button style="float: right" type="primary" @click="openCaseFileConfirm">补件</el-button>
          </el-row>
          <el-row>
            <el-tabs v-model="fileActiveName">
              <el-tab-pane label="文件管理" name="first">
                <el-table :data="caseFileList" border stripe v-loading="caseFileLoading">
                  <el-table-column label="文件名" align="center" prop="filename" />
                  <el-table-column label="上传人" align="center" prop="uploader" />
                  <el-table-column label="上传时间" align="center" prop="upload_time" />
                  <el-table-column label="说明" align="center" prop="content" show-overflow-tooltip/>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button @click="showCaseDocument(scope.row.url)" type="primary">预览</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="补件通知" name="second">
                <el-table :data="caseNoticeList" border stripe v-loading="caseNoticeLoading">
                  <el-table-column label="通知人" align="center" prop="notice_user" />
                  <el-table-column label="被通知人" align="center" prop="be_noticed_user" />
                  <el-table-column label="通知内容" align="center" prop="content" show-overflow-tooltip/>
                  <el-table-column label="通知时间" align="center" prop="notice_time" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="被申请人" :visible.sync="respondentDialog.visible" :close-on-click-modal="false" width="40%" append-to-body destroy-on-close>
      <el-form :model="respondentDialog.form" ref="respondentForm" :rules="respondentDialog.useRule" size="small" label-width="120px">
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="respondentDialog.form.type" @change="changeRespondentType">
            <el-radio label="1">个人</el-radio>
            <el-radio label="2">企业</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="respondentDialog.form.type === '1'">
          <el-form-item label="真实姓名" prop="name">
            <el-input v-model="respondentDialog.form.name"/>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="respondentDialog.form.mobile"/>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="respondentDialog.form.email"/>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="respondentDialog.form.gender">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份证号" prop="idNumber">
            <el-input v-model="respondentDialog.form.idNumber"/>
          </el-form-item>
          <el-form-item label="所在单位" prop="units">
            <el-input v-model="respondentDialog.form.units"/>
          </el-form-item>
          <el-form-item label="所在地区" prop="baseRegion">
            <el-select v-model="baseRegion1" placeholder="请选择">
              <el-option v-for="item in baseRegion" :value="item" :label="item.label" :key="item.value">
              </el-option>
            </el-select>
            <el-select v-model="baseRegion2" placeholder="请选择" v-if="baseRegion1">
              <el-option v-for="item in baseRegion1.children" :value="item" :label="item.label" :key="item.value">
              </el-option>
            </el-select>
            <el-select v-model="respondentDialog.form.baseRegion" placeholder="请选择" v-if="baseRegion2">
              <el-option v-for="item in baseRegion2.children" :value="item.value" :label="item.label" :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="respondentDialog.form.address"/>
          </el-form-item>
          <el-form-item label="身份证正面" prop="idNumberFront">
            <el-upload
              name="idNumberFront"
              action="idNumberFront"
              list-type="picture-card"
              :file-list="respondentDialog.fileList.idNumberFrontFileList"
              :auto-upload="false"
              :limit="1"
              :multiple="false"
              accept="image/png, image/jpeg"
              :on-change="handleIdNumberFrontSuccess"
              :on-remove="removeIdNumberFront">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证反面" prop="idNumberOpposite">
            <el-upload
              name="idNumberOpposite"
              action="idNumberOpposite"
              list-type="picture-card"
              :file-list="respondentDialog.fileList.idNumberOppositeFileList"
              :auto-upload="false"
              :limit="1"
              :multiple="false"
              accept="image/png, image/jpeg"
              :on-change="handleIdNumberOppositeSuccess"
              :on-remove="removeIdNumberOpposite">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </template>
        <template v-else-if="respondentDialog.form.type === '2'">
          <el-form-item label="企业名称" prop="name">
            <el-input v-model="respondentDialog.form.name"/>
          </el-form-item>
          <el-form-item label="企业联系人姓名" prop="companyContacts">
            <el-input v-model="respondentDialog.form.companyContacts"/>
          </el-form-item>
          <el-form-item label="企业联系人手机" prop="mobile">
            <el-input v-model="respondentDialog.form.mobile"/>
          </el-form-item>
          <el-form-item label="企业邮箱" prop="email">
            <el-input v-model="respondentDialog.form.email"/>
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="uniformSocialCreditCode">
            <el-input v-model="respondentDialog.form.uniformSocialCreditCode"/>
          </el-form-item>
          <el-form-item label="法定代表人姓名" prop="corporateName">
            <el-input v-model="respondentDialog.form.corporateName"/>
          </el-form-item>
          <el-form-item label="法定代表人身份证号" prop="corporateIdNumber">
            <el-input v-model="respondentDialog.form.corporateIdNumber"/>
          </el-form-item>
          <el-form-item label="企业所在地区" prop="baseRegion">
            <el-select v-model="baseRegion1" placeholder="请选择">
              <el-option v-for="item in baseRegion" :value="item" :label="item.label" :key="item.value">
              </el-option>
            </el-select>
            <el-select v-model="baseRegion2" placeholder="请选择" v-if="baseRegion1">
              <el-option v-for="item in baseRegion1.children" :value="item" :label="item.label" :key="item.value">
              </el-option>
            </el-select>
            <el-select v-model="respondentDialog.form.baseRegion" placeholder="请选择" v-if="baseRegion2">
              <el-option v-for="item in baseRegion2.children" :value="item.value" :label="item.label" :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="respondentDialog.form.address"/>
          </el-form-item>
          <el-form-item label="法定代表人身份证正面" prop="corporateIdNumberFront">
            <el-upload
              name="corporateIdNumberFront"
              action="corporateIdNumberFront"
              list-type="picture-card"
              :file-list="respondentDialog.fileList.corporateIdNumberFrontFileList"
              :auto-upload="false"
              :limit="1"
              :multiple="false"
              accept="image/png, image/jpeg"
              :on-change="handleCorporateIdNumberFrontSuccess"
              :on-remove="removeCorporateIdNumberFront">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="法定代表人身份证反面" prop="corporateIdNumberOpposite">
            <el-upload
              name="corporateIdNumberOpposite"
              action="corporateIdNumberOpposite"
              list-type="picture-card"
              :file-list="respondentDialog.fileList.corporateIdNumberOppositeFileList"
              :auto-upload="false"
              :limit="1"
              :multiple="false"
              accept="image/png, image/jpeg"
              :on-change="handleCorporateIdNumberOppositeSuccess"
              :on-remove="removeCorporateIdNumberOpposite">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="法定代表人身份证明" prop="corporateCertification">
            <el-upload
              name="corporateCertification"
              action="corporateCertification"
              list-type="picture-card"
              :file-list="respondentDialog.fileList.corporateCertificationFileList"
              :auto-upload="false"
              :limit="1"
              :multiple="false"
              accept="image/png, image/jpeg"
              :on-change="handleCorporateCertificationSuccess"
              :on-remove="removeCorporateCertification">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="企业营业执照" prop="businessLicensePhoto">
            <el-upload
              name="businessLicensePhoto"
              action="businessLicensePhoto"
              list-type="picture-card"
              :file-list="respondentDialog.fileList.businessLicensePhotoFileList"
              :auto-upload="false"
              :limit="1"
              :multiple="false"
              accept="image/png, image/jpeg"
              :on-change="handleBusinessLicensePhotoSuccess"
              :on-remove="removeBusinessLicensePhoto">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRespondent">确 定</el-button>
        <el-button @click="respondentDialog.visible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="证据" :visible.sync="evidenceDialog.visible" :close-on-click-modal="false" width="40%" append-to-body destroy-on-close>
      <el-form :model="evidenceDialog.form" ref="evidenceForm" :rules="evidenceDialog.rules" size="small" label-width="120px">
        <el-form-item label="证据名称" prop="evidenceName">
          <el-input v-model="evidenceDialog.form.evidenceName"/>
        </el-form-item>
        <el-form-item label="证据目的" prop="evidenceRemark">
          <el-input v-model="evidenceDialog.form.evidenceRemark"/>
        </el-form-item>
        <el-form-item label="文件" prop="evidenceAttachment">
          <el-upload
            name="evidenceAttachment"
            action="evidenceAttachment"
            list-type="picture-card"
            :file-list="evidenceDialog.fileList"
            :auto-upload="false"
            :limit="1"
            :multiple="false"
            :on-change="handleEvidenceSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addEvidence">确 定</el-button>
        <el-button @click="evidenceDialog.visible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="补件申请" :visible.sync="caseFileConfirmDialog.visible" :close-on-click-modal="false" width="40%" append-to-body destroy-on-close>
      <el-form :model="caseFileConfirmDialog.form" ref="caseFileConfirmForm" :rules="caseFileConfirmDialog.rules" size="small" label-width="120px">
        <el-form-item label="文件名称" prop="filename">
          <el-input v-model="caseFileConfirmDialog.form.filename"/>
        </el-form-item>
        <el-form-item label="补件说明" prop="userComplain">
          <el-input v-model="caseFileConfirmDialog.form.userComplain" type="textarea"/>
        </el-form-item>
        <el-form-item label="文件" prop="userComplainFile">
          <el-upload
            name="userComplainFile"
            action="userComplainFile"
            list-type="picture-card"
            :file-list="caseFileConfirmDialog.fileList"
            :auto-upload="false"
            :limit="1"
            :multiple="false"
            :on-change="handleCaseFileSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCaseFile">确 定</el-button>
        <el-button @click="caseFileConfirmDialog.visible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listContract } from '@/api/zfw/contract/contract'
import { listCase, saveArbitrationCase, getProject, getProjectTypeRemark, getBaseRegion, getCaseInfo, pay, caseDocument, caseFile, caseNotice, confirmCaseFile } from '@/api/zfw/arbitration/case'

export default {
  name: 'Case',
  components: {
  },
  data () {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 仲裁项目表格数据
      caseList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        contractName: '',
        contractNo: ''
      },
      // 表单参数
      form: {
        projectId: null,
        amount: null,
        isDispute: 1,
        arbitrationRequest: null,
        arbitrationBasis: null,
        arbitrationReason: null
      },
      // 表单校验
      rules: {
        projectId: [
          { required: true, message: '请选择所属项目', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入案件标的额', trigger: 'blur' }
        ],
        isDispute: [
          { required: true, message: '请选择案件双方是否发生了争议或逾期', trigger: 'blur' }
        ],
        contractId: [
          { required: true, message: '请选择合同', trigger: 'blur' }
        ],
        arbitrationRequest: [
          { required: true, message: '请输入仲裁请求', trigger: 'blur' }
        ],
        arbitrationBasis: [
          { required: true, message: '请输入索赔额的计算及各项计算数值的说明和依据', trigger: 'blur' }
        ],
        arbitrationReason: [
          { required: true, message: '请输入仲裁请求所依据的事实和理由', trigger: 'blur' }
        ]
      },
      activeName: 'first',
      fileActiveName: 'first',
      detailDialogVisible: false,
      projects: [],
      respondents: [],
      evidences: [],
      respondentDialog: {
        // 模式 1 添加 2编辑
        type: 1,
        editIndex: 0,
        visible: false,
        form: {
          type: '1',
          gender: '1'
        },
        fileList: {
          idNumberFrontFileList: [],
          idNumberOppositeFileList: [],
          corporateIdNumberFrontFileList: [],
          corporateIdNumberOppositeFileList: [],
          corporateCertificationFileList: [],
          businessLicensePhotoFileList: []
        },
        useRule: null,
        rules: [
          {
            name: [
              { required: true, message: '请输入真实姓名', trigger: 'blur' }
            ],
            mobile: [
              { required: true, message: '请输入手机号', trigger: 'blur' }
            ],
            email: [
              { required: true, message: '请输入邮箱', trigger: 'blur' }
            ],
            baseRegion: [
              { required: true, message: '请选择所在地区', trigger: 'blur' }
            ],
            address: [
              { required: true, message: '请输入详细地址', trigger: 'blur' }
            ],
            gender: [
              { required: true, message: '请选择性别', trigger: 'blur' }
            ],
            idNumber: [
              { required: true, message: '请输入身份证号', trigger: 'blur' }
            ]
          },
          {
            name: [
              { required: true, message: '请输入企业名称', trigger: 'blur' }
            ],
            companyContacts: [
              { required: true, message: '请输入企业联系人姓名', trigger: 'blur' }
            ],
            mobile: [
              { required: true, message: '请输入企业联系人手机', trigger: 'blur' }
            ],
            email: [
              { required: true, message: '请输入企业邮箱', trigger: 'blur' }
            ],
            uniformSocialCreditCode: [
              { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
            ],
            corporateName: [
              { required: true, message: '请输入法定代表人姓名', trigger: 'blur' }
            ],
            baseRegion: [
              { required: true, message: '请选择企业所在地区', trigger: 'blur' }
            ],
            address: [
              { required: true, message: '请输入详细地址', trigger: 'blur' }
            ],
            businessLicensePhoto: [
              { required: true, message: '请上传企业营业执照', trigger: 'blur' }
            ]
          }
        ]
      },
      evidenceTips: '',
      evidenceDialog: {
        visible: false,
        rules: {
          evidenceName: [
            { required: true, message: '请输入证据名称', trigger: 'blur' }
          ],
          evidenceRemark: [
            { required: true, message: '请输入证据目的', trigger: 'blur' }
          ],
          evidenceAttachment: [
            { required: true, message: '请上传证据文件', trigger: 'blur' }
          ]
        },
        form: {
          evidenceName: '',
          evidenceRemark: '',
          evidenceAttachment: null
        },
        fileList: []
      },
      contracts: [],
      contractLoading: false,
      baseRegion: null,
      baseRegion1: null,
      baseRegion2: null,
      caseInfo: null,
      payTitle: '',
      caseInfoLoading: false,
      caseFileList: [],
      caseNoticeList: [],
      caseDocument: {
        page: {
          total_number: 0
        }
      },
      caseDocumentLoading: false,
      caseFileLoading: false,
      caseNoticeLoading: false,
      caseFileConfirmDialog: {
        visible: false,
        form: {
          filename: '',
          userComplain: '',
          userComplainFile: null
        },
        rules: {
          filename: [
            { required: true, message: '请输入文件名称', trigger: 'blur' }
          ],
          userComplain: [
            { required: true, message: '请输入补件说明', trigger: 'blur' }
          ],
          userComplainFile: [
            { required: true, message: '请上传文件', trigger: 'blur' }
          ]
        },
        fileList: []
      }
    }
  },
  created () {
    this.initBaseRegion()
    this.initProject()
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      listCase(this.queryParams).then(response => {
        this.loading = false
        if (response.code === 100) {
          this.caseList = response.data.records
          this.total = response.data.total
        }
      })
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {
        id: undefined,
        companyId: undefined,
        type: undefined,
        projectId: undefined,
        name: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        valid: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.open = true
      this.title = '立案'
    },
    /** 提交按钮 */
    submitForm () {
      let that = this
      this.$refs['form'].validate(valid => {
        if (valid && that.checkRespondentsAndEvidences()) {
          let fileIndex = 1
          let formdata = new FormData()
          that.form.respondents = that.respondents
          that.form.evidences = that.evidences
          that.respondents.forEach(item => {
            if (item.type === '1') {
              fileIndex = that.appendFile(item.idNumberFront, formdata, fileIndex)
              fileIndex = that.appendFile(item.idNumberOpposite, formdata, fileIndex)
            } else if (item.type === '2') {
              fileIndex = that.appendFile(item.corporateIdNumberFront, formdata, fileIndex)
              fileIndex = that.appendFile(item.corporateIdNumberOpposite, formdata, fileIndex)
              fileIndex = that.appendFile(item.corporateCertification, formdata, fileIndex)
              fileIndex = that.appendFile(item.businessLicensePhoto, formdata, fileIndex)
            }
          })
          that.evidences.forEach(item => {
            fileIndex = that.appendFile(item.evidenceAttachment, formdata, fileIndex)
          })
          formdata.append('arbitrationCase', JSON.stringify(that.form))
          saveArbitrationCase(formdata).then(res => {
            if (res.code === 0) {
              this.handleQuery()
              this.$refs['form'].resetForm()
              this.open = false
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        }
      })
    },
    appendFile (obj, formdata, fileIndex) {
      if (obj) {
        let file = obj.raw
        let filename = fileIndex++ + '|' + obj.name
        formdata.append('files', file, filename)
        obj.fileName = filename
      }
      return fileIndex
    },
    checkRespondentsAndEvidences () {
      if (this.respondents === null || this.respondents.length === 0) {
        this.$message({
          message: '请添加被申请人',
          type: 'error'
        })
        return false
      }

      if (this.evidences === null || this.evidences.length === 0) {
        this.$message({
          message: '请添加合同证据',
          type: 'error'
        })
        return false
      }
      return true
    },
    /**
     * 展示详情
     */
    handleDetail (caseId) {
      this.caseInfoLoading = true
      this.detailDialogVisible = true
      getCaseInfo({ caseId: caseId }).then(res => {
        if (res.code === 0) {
          this.caseInfo = res.data
          this.caseInfo.caseId = caseId
          this.payTitle = '案件仲裁费用为' + this.caseInfo.case_arbitration_fee + '元。点击确认进行付款扣费。？'
          this.caseInfoLoading = false
          this.getCaseDocument()
          this.getCaseFile()
          this.getCaseNotice()
        } else {
          this.caseInfoLoading = false
          this.$message({
            message: '案件详情获取失败',
            type: 'error'
          })
        }
      })
    },
    initProject () {
      getProject().then(res => {
        if (res.code === 100) {
          this.projects = res.data
        }
      })
    },
    openRespondentDialog () {
      this.respondentDialog.type = 1
      this.respondentDialog.form = {
        type: '1',
        gender: '1'
      }
      this.respondentDialog.useRule = this.respondentDialog.rules[0]
      this.respondentDialog.visible = true
      this.respondentDialog.fileList = {
        idNumberFrontFileList: [],
        idNumberOppositeFileList: [],
        corporateIdNumberFrontFileList: [],
        corporateIdNumberOppositeFileList: [],
        corporateCertificationFileList: [],
        businessLicensePhotoFileList: []
      }
    },
    /**
     * 添加被申请人
     */
    addRespondent () {
      this.$refs['respondentForm'].validate(valid => {
        if (valid) {
          let respondent = this.respondentDialog.form
          if (this.respondentDialog.type === 1) {
            for (let i in this.respondents) {
              if (respondent.type === this.respondents[i].type && (respondent.name === this.respondents[i].name || respondent.mobile === this.respondents[i].mobile)) {
                this.$message({
                  message: '无法添加名称和手机号相同的被申请人',
                  type: 'error'
                })
                return
              }
            }
            this.respondents.push(respondent)
          } else if (this.respondentDialog.type === 2) {
            for (let i in this.respondents) {
              if (parseInt(i) !== this.respondentDialog.editIndex && respondent.type === this.respondents[i].type &&
                (respondent.name === this.respondents[i].name || respondent.mobile === this.respondents[i].mobile)) {
                this.$message({
                  message: '无法编辑为名称和手机号相同的被申请人',
                  type: 'error'
                })
                return
              }
            }
            this.respondents[this.respondentDialog.editIndex] = respondent
          }
          this.respondentDialog.visible = false
        }
      })
    },
    /**
     * 编辑被申请人
     * @param index
     */
    editRespondent (index) {
      this.respondentDialog.editIndex = index
      this.openRespondentDialog()
      this.respondentDialog.type = 2
      this.respondentDialog.form = this.respondents[index]
      this.respondentDialog.fileList.idNumberFrontFileList.push(this.respondentDialog.form.idNumberFront)
      this.respondentDialog.fileList.idNumberOppositeFileList.push(this.respondentDialog.form.idNumberOpposite)
      this.respondentDialog.fileList.corporateIdNumberFrontFileList.push(this.respondentDialog.form.corporateIdNumberFront)
      this.respondentDialog.fileList.corporateIdNumberOppositeFileList.push(this.respondentDialog.form.corporateIdNumberOpposite)
      this.respondentDialog.fileList.corporateCertificationFileList.push(this.respondentDialog.form.corporateCertification)
      this.respondentDialog.fileList.businessLicensePhotoFileList.push(this.respondentDialog.form.businessLicensePhoto)
    },
    /**
     * 删除被申请人
     * @param index
     */
    removeRespondent (index) {
      this.respondents.splice(index, 1)
    },
    /**
     * 改变被申请人类型事件
     */
    changeRespondentType (val) {
      if (val === '1') {
        this.respondentDialog.useRule = this.respondentDialog.rules[0]
      } else if (val === '2') {
        this.respondentDialog.useRule = this.respondentDialog.rules[1]
      }
      this.$refs['respondentForm'].clearValidate()
    },
    handleIdNumberFrontSuccess (file, fileList) {
      this.respondentDialog.form.idNumberFront = file
      this.respondentDialog.fileList.idNumberFrontFileList = fileList
    },
    removeIdNumberFront (file, fileList) {
      this.respondentDialog.form.idNumberFront = null
      this.respondentDialog.fileList.idNumberFrontFileList = []
    },
    handleIdNumberOppositeSuccess (file, fileList) {
      this.respondentDialog.form.idNumberOpposite = file
      this.respondentDialog.fileList.idNumberOppositeFileList = fileList
    },
    removeIdNumberOpposite (file, fileList) {
      this.respondentDialog.form.idNumberOpposite = null
      this.respondentDialog.fileList.idNumberOppositeFileList = []
    },
    handleCorporateIdNumberFrontSuccess (file, fileList) {
      this.respondentDialog.form.corporateIdNumberFront = file
      this.respondentDialog.fileList.corporateIdNumberFrontFileList = fileList
    },
    removeCorporateIdNumberFront (file, fileList) {
      this.respondentDialog.form.corporateIdNumberFront = null
      this.respondentDialog.fileList.corporateIdNumberFrontFileList = []
    },
    handleCorporateIdNumberOppositeSuccess (file, fileList) {
      this.respondentDialog.form.corporateIdNumberOpposite = file
      this.respondentDialog.fileList.corporateIdNumberOppositeFileList = fileList
    },
    removeCorporateIdNumberOpposite (file, fileList) {
      this.respondentDialog.form.corporateIdNumberOpposite = null
      this.respondentDialog.fileList.corporateIdNumberOppositeFileList = []
    },
    handleCorporateCertificationSuccess (file, fileList) {
      this.respondentDialog.form.corporateCertification = file
      this.respondentDialog.fileList.corporateCertificationFileList = fileList
    },
    removeCorporateCertification (file, fileList) {
      this.respondentDialog.form.corporateCertification = null
      this.respondentDialog.fileList.corporateCertificationFileList = []
    },
    handleBusinessLicensePhotoSuccess (file, fileList) {
      this.respondentDialog.form.businessLicensePhoto = file
      this.respondentDialog.fileList.businessLicensePhotoFileList = fileList
    },
    removeBusinessLicensePhoto (file, fileList) {
      this.respondentDialog.form.businessLicensePhoto = null
      this.respondentDialog.fileList.businessLicensePhotoFileList = []
    },
    openEvidenceDialog () {
      this.evidenceDialog.visible = true
    },
    addEvidence () {
      this.$refs['evidenceForm'].validate(valid => {
        if (valid) {
          let evidence = this.evidenceDialog.form
          this.evidences.push(evidence)
          this.evidenceDialog.visible = false
        }
      })
    },
    removeEvidence (index) {
      this.evidences.splice(index, 1)
    },
    handleEvidenceSuccess  (file, fileList) {
      this.evidenceDialog.form.evidenceAttachment = file
      this.evidenceDialog.fileList = fileList
    },
    remoteMethod (name) {
      if (name !== '') {
        this.contractLoading = true
        listContract({ contractName: name, status: 4 }).then(res => {
          this.contractLoading = false
          if (res.code === 100 && res.data) {
            this.contracts = res.data.records
          }
        })
      } else {
        this.contracts = []
      }
    },
    initProjectTypeRemark (value) {
      this.evidenceTips = null
      getProjectTypeRemark({ projectId: value }).then(res => {
        if (res.code === 0) {
          this.evidenceTips = res.data.project_type_remark
        }
      })
    },
    initBaseRegion () {
      getBaseRegion().then(res => {
        if (res.code === 0) {
          this.baseRegion = res.data
        } else {
          this.$message({
            message: '地区参数加载失败',
            type: 'error'
          })
        }
      })
    },
    confirmPay () {
      this.caseInfoLoading = true
      pay({ caseId: this.caseInfo.caseId }).then(res => {
        if (res.code === 0) {
          if (res.data.status === 'rich') {
            this.$message('缴费成功')
            this.handleDetail(this.caseInfo.caseId)
          } else {
            this.$message({
              message: '余额不足,缴费失败',
              type: 'error'
            })
          }
        } else {
          this.$message({
            message: '缴费失败',
            type: 'error'
          })
        }
        this.caseInfoLoading = false
      }).catch(err => {
        this.caseInfoLoading = false
        console.error(err)
      })
    },
    getCaseDocument () {
      this.caseDocumentLoading = true
      let param = {
        id: this.caseInfo.caseId,
        page: this.caseDocument.page.page_current,
        size: this.queryParams.pageSize
      }
      caseDocument(param).then(response => {
        this.caseDocumentLoading = false
        if (response.code === 0) {
          this.caseDocument = response.data
        }
      })
    },
    showCaseDocument (url) {
      window.open(url)
    },
    getCaseFile () {
      this.caseFileLoading = true
      caseFile({ id: this.caseInfo.caseId }).then(res => {
        if (res.code === 0) {
          this.caseFileLoading = false
          this.caseFileList = res.data
        }
      })
    },
    getCaseNotice () {
      this.caseNoticeLoading = true
      caseNotice({ id: this.caseInfo.caseId }).then(res => {
        if (res.code === 0) {
          this.caseNoticeLoading = false
          this.caseNoticeList = res.data
        }
      })
    },
    handleCaseFileSuccess (file, fileList) {
      this.caseFileConfirmDialog.form.userComplainFile = file
      this.caseFileConfirmDialog.fileList = fileList
    },
    openCaseFileConfirm () {
      this.caseFileConfirmDialog.form = {
        filename: '',
        userComplain: '',
        userComplainFile: null
      }
      this.caseFileConfirmDialog.visible = true
    },
    addCaseFile () {
      let formdata = new FormData()
      formdata.append('id', this.caseInfo.caseId)
      formdata.append('filename', this.caseFileConfirmDialog.form.filename)
      formdata.append('userComplain', this.caseFileConfirmDialog.form.userComplain)
      formdata.append('userComplainFile', this.caseFileConfirmDialog.form.userComplainFile.raw)
      confirmCaseFile(formdata).then(res => {
        if (res.code === 0) {
          this.getCaseFile()
          this.caseFileConfirmDialog.visible = false
        }
      })
    }
  }
}
</script>
